<html>
<head>
<title>进度条演示页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
	width: 100%;
	background-color: white;
}
.processbar {
	height: 23px;
	width: 30%;


	background-color: #E0E1E1;
	border: 1px solid #E0E1E1;
}
.processbar .finish {
	height: 23px;
	width: 40%;
	background-color: #77BE1A;
}
</style>
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.corner.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".processbar").corner();
	$(".processbar .finish").corner();
})


var i = 0;
var timer = setInterval(function(){
	$(".processbar .finish").css("width", i + "%");
	i++;
	if (i > 100) {
		clearInterval(timer);					
	}
}, 10);


</script>
</head>
<body>
  <div class="processbar">
  	<div class="finish"></div>
  </div>
   <div class="processbar" style="margin-top: 100px;">
  	<div class="finish"></div>
  </div>

</body>
</html>